<template>
    <div class="contactTasks">
        <el-radio></el-radio>
        当前联络任务:{{ tskName }}
    </div>
    <div class="box" style="height:700px; margin-top: 5px;">
        <!-- 我的联络任务 -->
        <div class="left">
            <div style="display: flex;   margin-top:15px;">
                <div class="message" style="margin-left: 30px;">
                    <span>|</span>人员基本信息
                </div>
            </div>
            <el-form label-position="right" label-width="95px" :model="state.dataForm" :rules="rules"
                style="flex-wrap: nowrap;display: flex;justify-content: flex-start;margin-top: 30px;">
                <el-row style="flex:6">
                    <el-col>
                        <el-form-item label="中文姓名">
                            <el-input v-model="state.dataForm.name" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="英文姓名">
                            <el-input v-model="state.dataForm.firstName" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="公司名称">
                            <el-input v-model="state.dataForm.company" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="手机一" prop="mobile">
                            <el-input v-model="state.dataForm.mobile" placeholder="请输入"></el-input>
                            <el-button type="primary" plain
                                @click.stop="callPhone(state.dataForm.mobile)">拨打电话</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="手机二" prop="mobile2">
                            <el-input v-model="state.dataForm.mobile2" placeholder="请输入"></el-input>
                            <el-button type="primary" plain>拨打电话</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="电话一">
                            <el-input v-model="state.dataForm.tel" placeholder="请输入"></el-input>
                            <el-button type="primary" plain>拨打电话</el-button>
                            <!-- <el-button type="primary"  @click='phone(state.dataForm.tel)'  plain>拨打电话</el-button> -->
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="电话二">
                            <el-input v-model="state.dataForm.tel2" placeholder="请输入"></el-input>
                            <el-button type="primary" plain>拨打电话</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="部门">
                            <el-input v-model="state.dataForm.department" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="职位">
                            <el-input v-model="state.dataForm.position" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="地址">
                            <el-input v-model="state.dataForm.address" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="第二地址">
                            <el-input v-model="state.dataForm.address2" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="flex:3">
                    <el-col>
                        <el-form-item label="Email" prop="email">
                            <el-input v-model="state.dataForm.email" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="Email2" prop="email2">
                            <el-input v-model="state.dataForm.email2" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="微信">
                            <el-input v-model="state.dataForm.wechat" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="网址">
                            <el-input v-model="state.dataForm.website" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="类别">
                            <ren-checkbox-group v-model="state.dataForm.category" dict-type="contact_category"
                                style="width:260px"></ren-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="行业">
                            <el-input v-model="state.dataForm.category" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="标签一">
                            <el-input v-model="state.dataForm.extField1" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="标签二">
                            <ren-checkbox-group v-model="state.dataForm.category" dict-type="details-tags"
                                style="width:260px"></ren-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="联络标签">
                            <ren-radio-group v-model="state.dataForm.contactTag"
                                dict-type="contact_tag"></ren-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="产品介绍">
                            <el-input v-model="state.dataForm.productIntroduce" type="textarea" placeholder="请输入"
                                style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="备注">
                            <el-input v-model="state.dataForm.remark" type="textarea" placeholder="请输入"
                                style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 中间 -->
        <div class="content"></div>
        <!-- 联络结果 -->
        <div class="right">
            <div style="display: flex; margin-top: 40px;margin-left: 20px; ">
                <div class="message">
                    <span>|</span>设置本次联络结果
                </div>
            </div>
            <el-form label-position="right" label-width="85px" style="margin-top: 10px;" :model="state.dataForm">
                <el-row>
                    <el-form-item label="联络结果">
                        <ren-radio-group v-model="state.dataForm.newLinkRecordDTO.lrdResult"
                            dict-type="contact-results"></ren-radio-group>
                    </el-form-item>
                    <!-- 未联络 -->
                    <div v-if="state.dataForm.newLinkRecordDTO.lrdResult == 'wait_contact'">
                        <el-form-item>
                            <ren-radio-group v-model="state.dataForm.newLinkRecordDTO.lrdLinkState"></ren-radio-group>
                        </el-form-item>
                    </div>
                    <!-- 待联络 -->
                    <div v-if="state.dataForm.newLinkRecordDTO.lrdResult == 'wait_contact'">
                        <el-form-item>
                            <ren-radio-group v-model="state.dataForm.newLinkRecordDTO.lrdLinkState"
                                dict-type="wait_contact" style="width: 300px;"></ren-radio-group>
                        </el-form-item>
                    </div>
                    <!-- 失败 -->
                    <div v-if="state.dataForm.newLinkRecordDTO.lrdResult == 'telephone_fail'">
                        <el-form-item>
                            <ren-radio-group v-model="state.dataForm.newLinkRecordDTO.lrdLinkState"
                                dict-type="telephone_fail" style="width: 300px;"></ren-radio-group>
                        </el-form-item>
                    </div>
                    <!-- 不联络-->
                    <div v-if="state.dataForm.newLinkRecordDTO.lrdResult == 'no_contact'">
                        <el-form-item>
                            <ren-radio-group v-model="state.dataForm.newLinkRecordDTO.lrdLinkState"
                                dict-type="no_contact"></ren-radio-group>
                        </el-form-item>
                    </div>
                    <!-- 已联络-->
                    <div v-if="state.dataForm.newLinkRecordDTO.lrdResult == 'telephone_contacted'">
                        <el-form-item>
                            <ren-radio-group v-model="state.dataForm.newLinkRecordDTO.lrdLinkState"
                                dict-type="telephone_contacted"></ren-radio-group>
                        </el-form-item>
                    </div>
                    <el-col :span="16">
                        <el-form-item label="联络备注">
                            <el-input type="textarea" v-model="state.dataForm.newLinkRecordDTO.lrdRemark"
                                placeholder="请输入" style="width: 300px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item>
                            <el-checkbox v-model="state.dataForm.ifBlacked" label="黑名单" />
                            <el-checkbox v-model="state.dataForm.ifSkipCompany" label="跳过同公司人员" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item>
                            <el-button type="primary" @click="submission()" v-if="state.dataForm.isPrincipal==true">联络提交</el-button>
                            <el-button @click="next()">下一条</el-button>
                            <el-button @click="addOrUpdateHandle()">查看参会历史</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div style=" margin-top: 20px;margin-left: 20px;">
                    <div class="message">
                        <span>|</span>
                        联络历史
                    </div>
                </div>
            </el-form>
            <el-form>
                <div v-for="(item, index) in state.dataForm.linkRecordDTOList" :key="index" class="histoty">
                    <el-row>
                        <el-text v-model="item.tskName">联络任务：{{ item.tskName }} </el-text>
                    </el-row>
                    <el-row>
                        <el-text v-model="item.personName">联络信息：{{ item.personName }}</el-text>
                    </el-row>
                    <el-row>
                        <el-text v-model="item.lrdPlanTime">联络过程：{{ item.lrdPlanTime }}</el-text>
                    </el-row>
                    <el-row>
                        <el-text v-model="item.lrdResult">联络结果：{{ item.lrdResult }}</el-text>
                    </el-row>
                    <el-row>
                        <el-text v-model="item.remark">联络备注：{{ item.lrdRemark }}</el-text>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
    <!-- 查看参会历史 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import baseService from "@/service/baseService";
import { nextTick, reactive, ref, toRefs, } from "vue";
import { useRoute } from 'vue-router';
import { ElMessage } from "element-plus";
import AddOrUpdate from "./history-attendance.vue";
const view = reactive({
    dataForm: {
        tskId: "",
        psnId: "",
        tskType: "",
        id: "",
        name: "",
        city: '',
        curLinkId: '',
        firstName: "",
        lastName: "",
        tel: "",
        tel2: '',
        fax1: '',
        fax2: "",
        mobile: "",
        mobile2: "",
        email: "",
        email2: "",
        wechat: "",
        department: "",//部门
        position: "",//职务
        company: "",//公司
        website: "",//网址
        industry: "",//所属行业
        extField1: "",//标签一
        extField2: "",//标签二
        remark: "",//备注
        address: "",//地址
        address2: "",//英文地址
        category: "",//类别
        state: "",
        exhName: "",
        contactTag: "",
        productIntroduce: "",
        personName: "",//联络信息
        lrdRemark: "",//联络备注
        lrdResult: "",//联络结果
        lrdPlanTime: "",
        linkRecordDTOList: [] as any[],
        ifBlacked: "",//黑名单
        lrdLinkState: "",
        ifSkipCompany: "",//跳过同公司人员
        pageNum: 1,
        limit:1,
        list: [],
        isPrincipal: false,
        newLinkRecordDTO: {
            tskId: "",
            psnId: "",
            lrdResult: '',
            lrdLinkState: '',
            lrdRemark: '',
            lrdCreateTime: '',
            tskName: '',
            personName: ''
        },
    }
});

//初始化
const init = () => {
    Info()

};

//接收过来的id
const route = useRoute();
const id = route.query.id;
const tskName = route.query.tskName;
const exhId = route.query.curExhId;
const pageNum1 = 1;
const pageNum = ref(1);

const rules = ref({
    mobile: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'change' },],
    mobile2: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'change' },],
    email: [{ pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, message: '请输入正确的邮箱格式', trigger: 'change' },],
    email2: [{ pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, message: '请输入正确的邮箱格式', trigger: 'change' },],
});


//获取登录人是否为负责人
const Info = () => {
    baseService.get("crm/crmlinkrecord/ifPrincipal/"+id).then((res) => {
       state.dataForm.isPrincipal=res.data
    });
};

//获取回显数据
let curLrdId: string;
baseService.get("/crm/crmperson/contactCenter/" + id + "/" + pageNum1).then((res) => {
    if (res.data.list.length > 0) {
        Object.assign(state.dataForm, res.data.list[0]);
        curLrdId = res.data.list[0].curLrdId;
        state.dataForm.newLinkRecordDTO = {} as any;
    }
});

//联络提交
const submission = () => {
    return baseService.put("/crm/crmperson/saveContact", state.dataForm).then((res) => {
        if (res.code == 0) {
            state.getDataList();
            return ElMessage.success("保存成功");
        }
    });
};

//下一条
const next = () => {
    pageNum.value++;
    baseService.get("/crm/crmperson/contactCenter/" + id + "/" + pageNum.value,
    {limit :state.dataForm.limit}
    ).then((res) => {
        Object.assign(state.dataForm, res.data.list[0]);
    });
};


/**
 * 拨打电话
 * @param phone
 */
const callPhone = (phone: any) => {
    if (!phone) {
        ElMessage.error("外呼号码不能为空！");
        return;
    }
    if (phone.length < 10) {
        ElMessage.error("外呼号码长度不对！");
        return;
    }
    baseService.get("/tccc/checkcallPhone?callee=" + phone).then((res: any) => {
        if (res.count > 2) {
            ElMessage.error("当前号码已超过当日外呼次数限制！");
            return;
        } else {
            //开始外呼
            const reponse = (window as any).tccc.callOut({ phoneNumber: phone });
            reponse.then((res: any) => {
                baseService.post('/crm/crmtelhistory', { psnId: state.dataForm.id, tskId: id, sessionId: res.data.sessionId, timestamp: res.data.timestamp, exhId: exhId, lrdId: curLrdId }).then((res: any) => {
                    console.log(res);
                })
            })
                .catch((err: any) => {
                    console.log(err);
                })
        }
    });
};

const state = reactive({ ...useView(view), ...toRefs(view) });

const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
    addKey.value++;
    nextTick(() => {
        addOrUpdateRef.value.init(id);
    });
};

//页面进入执行
init();

</script>
<style lang="scss" scoped>
.message {
    height: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-left: -5px;
}

.el-col {
    margin-top: -7px;
}

.el-input {
    width: 180px;
}

.el-select {
    width: 180px;
}

.box {
    margin: -20px;
    display: flex;
    flex-wrap: nowrap;

    .left {
        width: 80%;
    }

    .right {
        width: 60%;
        height: 100%;
        overflow-y: scroll;
    }

    .content {
        width: 10px;
        background-color: #F0F2F5;

    }
}

.el-button {
    margin-left: 10px;
}

.histoty {
    border-radius: 10px 10px 10px 10px;
    margin-top: 20px;
    margin-left: 30px;
    width: 370px;
    background: linear-gradient(-87.99deg, rgba(249, 249, 249, 1) 1.33%, rgba(232, 250, 248, 1) 97.67%);
}

.el-text {
    padding: 10px 5px 5px 5px;
    margin-left: 10px;
}

.el-form-item::v-deep {
    .el-checkbox-group {
        .el-checkbox {
            width: 65px;
        }
    }
}

.contactTasks {
    height: 20px;
    font-size: 16px;
    font-weight: 600;
    margin-left: -5px;
    color: #17B3A3;
}

.message span {
    width: 10px;
    height: 30px;
    color: #17B3A3;
    background-color: #17B3A3;
    margin-right: 10px;
}
</style>
